; function Canvas(id) {
    var _obj = new initCanvas();

    var _canvas = document.getElementById(id);
    _canvas.onmousedown = function (ev) {
        var e = ev || event;
        var x = e.clientX;
        var y = e.clientY;
        if (!_obj.option.moveElm) {
            for (var i = _obj.option.childArray.length - 1; i >= 0; i--) {
                var elm = _obj.option.childArray[i];
                var x1 = elm.x, x2 = elm.x + elm.width;
                var y1 = elm.y, y2 = elm.y + elm.height;
                if (elm.type == 1) {
                    if (x1 <= x && x <= x2 && y1 <= y + elm.height && y + elm.height <= y2) {
                        _obj.option.moveElm = elm;
                        _obj.callback.mouseSelected(elm);
                        break;
                    }
                } else {
                    if (x1 <= x && x <= x2 && y1 <= y && y <= y2) {
                        _obj.callback.mouseSelected(elm);
                        break;
                    }
                }
            }
        }
        if (_obj.option.moveElm) {
            _obj.option.mouseSelected = _obj.option.moveElm;
            _obj.drag(x, y);
        } else {
            _obj.option.mouseSelected = null;
        }
    };
    _obj.option.canvas = _canvas;
    _obj.option.t2d = _obj.option.canvas.getContext('2d');
    _obj.option.width = _canvas.width;
    _obj.option.height = _canvas.height;
    return _obj;
};

; function initCanvas(id) {
    this.option = {
        moveElm: null,
        moveElmPoint: null,
        mouseSelected: null,
        canvas: null,
        t2d: null,
        width: null,
        height: null,
        isFrist: true,
        fillColor: '#000',
        fillColor2: null,
        childArray: []
    };
    this.callback = {
        mouseSelected: null
    };
    this.get2d = function () {
        return this.option.canvas.getContext('2d');
    };
    this.newTexture = function (_title, _fontSize, _color, _font) {
        if (!_color)
            _color = '#fff';
        if (!_font)
            _font = '宋体';
        if (!_fontSize)
            _fontSize = 16;
        var elm = {
            id: this.getGuid(),
            type: 1,
            color: _color,
            font: _font,
            fontSize: _fontSize,
            title: _title,
            rotate: 0,
            scaleX: 1,
            scaleY: 1,
            x: 0,
            y: _fontSize,
            alpha: 1,
            width: 0,
            height: 0
        };
        return elm;
    };
    this.newImage = function (_img, _width, _height) {
        if (!_width)
            _width = 0;
        if (!_height)
            _height = 0;
        var elm = {
            id: this.getGuid(),
            type: 2,
            rotate: 0,
            scaleX: 1,
            scaleY: 1,
            x: 0,
            y: 0,
            alpha: 1,
            width: _width,
            height: _height,
            img: _img
        };
        return elm;
    };
    this.addElement = function (elm) {
        for (var item of this.option.childArray) {
            if (item.id == elm.id) {
                console.log('error:已存在此元素');
                return;
            }
        }
        this.option.childArray.push(elm);
    };
    this.removeElement = function (elm) {
        var index = 0;
        for (var item of this.option.childArray) {
            if (item.id == elm.id) {
                break;
            }
            index++;
        }
        this.option.childArray.splice(index, 1);
    };
    this.addElements = function (elms) {
        for (var elm of elms) {
            for (var item of this.option.childArray) {
                if (item.id == elm.id) {
                    console.log('error:已存在此[' + item.id + ']元素');
                    return;
                }
            }
            this.option.childArray.push(elm);
        }
    };
    this.clearElement = function () {
        this.option.childArray = [];
    };
    this.draw = function () {
        var t2d = this.get2d();

        if (this.option.fillColor2) {
            var gradient = t2d.createLinearGradient(0, 0, 0, this.option.width);
            gradient.addColorStop(0, this.option.fillColor);
            gradient.addColorStop(0.5, this.option.fillColor2);
            t2d.fillStyle = gradient;
            t2d.fillRect(0, 0, this.option.width, this.option.height);
        } else {
            t2d.fillStyle = this.option.fillColor;
            t2d.fillRect(0, 0, this.option.width, this.option.height);
        }
        for (var item of this.option.childArray) {
            this.option.t2d.save();
            switch (item.type) {
                case 1:
                    t2d.fillStyle = item.color;
                    t2d.font = item.fontSize + 'px bold ' + item.font;
                    t2d.globalAlpha = item.alpha;
                    t2d.scale(item.scaleX, item.scaleY);
                    t2d.rotate(item.rotate * Math.PI / 180);
                    item.width = t2d.measureText(item.title).width;
                    item.height = item.fontSize;
                    t2d.fillText(item.title, parseInt(item.x), parseInt(item.y));
                    break;
                case 2:
                    t2d.globalAlpha = item.alpha;
                    t2d.scale(item.scaleX, item.scaleY);
                    t2d.rotate(item.rotate * Math.PI / 180);
                    t2d.drawImage(item.img, parseInt(item.x), parseInt(item.y));
                    break;
                default:
                    console.log('error:元素[' + item.id + ']类型错误');
                    break;
            }

            this.option.t2d.restore();
        }
    };
    this.drag = function (x, y) {
        var _obj = this;
        _obj.option.canvas.onmousemove = function (ev) {
            var e = ev || event;
            var ax = e.clientX;
            var ay = e.clientY;
            if (!_obj.option.moveElmPoint) {
                _obj.option.moveElmPoint = { x: ax - _obj.option.moveElm.x, y: ay - _obj.option.moveElm.y };
            }
            var fdx = ax - _obj.option.moveElmPoint.x;
            var fdy = ay - _obj.option.moveElmPoint.y;
            _obj.option.moveElm.x = fdx;
            _obj.option.moveElm.y = fdy;
            _obj.draw();
        };
        _obj.option.canvas.onmouseup = function (ev) {
            _obj.option.canvas.onmousemove = null;
            _obj.option.moveElm = null;
            _obj.option.moveElmPoint = null;
        };
    };

    this.getGuid = function () {
        var guid = "";
        for (var i = 1; i <= 32; i++) {
            var n = Math.floor(Math.random() * 16.0).toString(16);
            guid += n;
            if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                guid += "-";
        }
        return guid;
    };
};